<template>
  <a-modal v-model:visible="visible" :title="title" :maskClosable="false" :footer="null">
    <a-form :label-col="labelCol">
      <a-form-item label="名称" v-bind="validateInfos.name">
        <a-input v-model:value="formState.name" placeholder="请输入名称" />
      </a-form-item>
      <a-form-item label="排序" v-bind="validateInfos.jobSort">
        <a-input-number v-model:value="formState.jobSort" :min="0" :max="999" />
      </a-form-item>
      <a-form-item label="状态">
        <a-radio-group v-model:value="formState.enabled">
          <a-radio v-for="item in dictOptions" :key="item.id" :value="item.value">{{
            item.label
          }}</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item style="margin-bottom: 0px; margin-top: 40px; text-align: right">
        <a-button type="primary" @click.prevent="onSubmit">确认</a-button>
        <a-button style="margin-left: 10px" @click="resetFields">重置</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts">
  import { defineComponent, toRaw, reactive, ref, watch } from 'vue';
  import { Form, notification } from 'ant-design-vue';
  import { addJobApi, editJobApi } from '/@/api/job';
  import { reload } from './index';
  import { getDictDetailApi } from '/@/api/dictDetail';

  const formState = reactive({
    id: null,
    name: '',
    jobSort: 999,
    enabled: 'true',
  });
  const rulesRef = reactive({
    name: [
      {
        required: true,
        message: '请输入名称',
      },
    ],
    jobSort: [
      {
        required: true,
        message: '请输入序号',
        type: 'number',
      },
    ],
  });
  const useForm = Form.useForm;
  const { resetFields, validate, validateInfos } = useForm(formState, rulesRef);

  export default defineComponent({
    setup() {
      const visible = ref<boolean>(false);
      const title = ref<string>('');
      watch(visible, (newVal, _oldVal) => {
        if (!newVal) {
          resetFields();
        }
      });

      const dictOptions = ref([]);
      const open = async (isAdd: boolean, record) => {
        if (isAdd) {
          title.value = '新增岗位';
        } else {
          title.value = '编辑岗位';
          formState.id = record.id;
          formState.name = record.name;
          formState.jobSort = record.jobSort;
          formState.enabled = String(record.enabled);
        }
        //获取字典数据
        const resDict = await getDictDetailApi('job_status');
        dictOptions.value = resDict?.content;
        visible.value = true;
      };

      const onSubmit = (_e: MouseEvent) => {
        validate()
          .then(async () => {
            const item = toRaw(formState);
            if (!!formState.id) {
              await editJobApi({ ...item });
              notification['success']({
                message: '编辑岗位成功',
                duration: 3,
              });
            } else {
              await addJobApi({ ...item });
              notification['success']({
                message: '新增岗位成功',
                duration: 3,
              });
            }
            visible.value = false;
            reload.value = !reload.value;
          })
          .catch((err) => {
            console.log('error', err);
          });
      };

      return {
        open,
        visible,
        title,
        onSubmit,
        labelCol: { style: { width: '70px' } },
        wrapperCol: { span: 14 },
        validateInfos,
        resetFields,
        formState,
        dictOptions,
      };
    },
  });
</script>
